<template>
  <section class="forget-wrapper">
    <div class="forget-content">
      <el-form ref="codeForm" :model="getCodeModel">
        <el-row class="text-left">找回密码</el-row>
        <nb-form
          placeholder="手机号"
          required="isPhone"
          v-model="getCodeModel.mobile"
          prop="mobile"
          :maxs="11"
        ></nb-form>
        <nb-form
          placeholder="验证码"
          required=":输入验证码"
          v-model="getCodeModel.captCha"
          prop="captCha"
        >
          <el-row slot="in" @click.native="getCodeImg" class="right-box box1" :style="{backgroundImage:`url(${code})`}"></el-row>
        </nb-form>
        <nb-form
          placeholder="短信验证码"
          prop="authCode"
          v-model="authCode"
          required=":请输入短信验证码"
        >
          <el-row slot="in" @click.native="getCode" class="right-box box2" :class="{disabled: disabled}">{{sendText}}</el-row>
        </nb-form>
      </el-form>
      <div class="btn-wrapper">
        <el-button class="next" type="primary" @click="nextStep">下一步</el-button>
      </div>
    </div>
  </section>
</template>

<script>
  import NbForm from '@/components/nb-form.vue'
  import Mixin from '@/common/mixin'
  export default {
    data () {
      return {
        code: '',
        title: '找回密码',
        getCodeModel: {
          mobile: '',
          type: '200',
          uuid: '',
          captCha: ''
        },
        sendText: '发送验证码',
        disabled: false,
        authCode: '',
        needCheck: ['mobile', 'captCha']
      }
    },
    mixins: [Mixin],
    components: {
      NbForm
    },
    methods: {
      getCodeImg () {
        this.$store.dispatch('GET_CAPTCHA', {}).then(res => {
          this.code = `data:image/png;base64,${res.data.captcha}`
          this.getCodeModel.uuid = res.data.uuid
        })
      },
      getCode (e) {
        if (e.target.className.match('disabled')) return
        let checked = this.validator(this.$refs.codeForm, this.needCheck)
        !checked && (
          this.$store.dispatch('GET_CODE', {param: this.getCodeModel}).then(res => {
            if (res.success) {
              this.$message.success('获取验证码成功！')
              this.countDown()
            } else {
              this.$message.error(res.msg)
              this.getCodeImg()
            }
          })
        )
      },
      back () {
        this.$emit('action', 'back')
      },
      countDown () {
        let n = 60
        this.disabled = true
        let timer = setInterval(() => {
          this.sendText = `重新获取(${n--}秒)`
          if (n < 0) {
            clearInterval(timer)
            this.sendText = '发送验证码'
            this.disabled = false
          }
        }, 1000)
      },
      nextStep () {
        let _data = {
          param: {
            mobile: this.getCodeModel.mobile,
            authCode: this.authCode,
            type: '200'
          }
        }
        let checked = this.validator(this.$refs.codeForm)
        !checked && (this.$store.dispatch('CHECK_CODE', _data).then(res => {
          if (res.success) {
            this.$emit('action', 'nextStep', this.getCodeModel.mobile)
          } else {
            this.$message.error(res.msg)
          }
        }))
      }
    },
    mounted () {
      this.getCodeImg()
    }
  }
</script>

<style lang="scss" >
  @import '../../../assets/style/mixin.scss';
.forget-wrapper{
  background: white;
  margin: 0 auto;
  font-size: 14px;
  .forget-content{
    width: 300px;
    margin: 0 auto;
    padding: 70px 0 50px;
    .text-left{
      font-size: 24px;
      color: #333;
      padding-bottom: 20px;
    }
    .box1{
      width: 78px;
      background-repeat: no-repeat;
      background-position: 4px 5px;
      background-size: contain;
      cursor: pointer;
    }
    .box2{
      border-left: 1px solid #d8dce5;
      padding: 0 10px;
      font-size: 13px;
      color: #8f9bb2;
      cursor: pointer;
    }
    .box2.disabled{
      cursor: wait;
    }
    .box2:hover{
      color: #666;
    }
    .code{
      margin-left: 18px;
    }
    .btn-wrapper{
      text-align: center;
      .next{
        background: $btnBlur;
        width: 100%;
      }
    }
  }
}
</style>
